<template>
	<view class="login-container">
		<!-- 顶部logo和欢迎语 -->
		<view class="welcome-section">
			<image src="/static/logo.png" class="logo"></image>
			<view class="welcome-text">欢迎使用 马上拼车</view>
			<view class="slogan">让出行变得温暖和愉悦</view>
		</view>

		<!-- 微信登录按钮 -->
		<view class="login-btn-container">
			<button class="wechat-login-btn" open-type="getUserInfo" @click="wechatLogin">
				<image src="/static/wechat_icon.png" class="wechat-icon"></image>
				<text>微信用户一键登录</text>
			</button>
		</view>
	</view>
</template>
<script>
import { initWebSocket } from '@/utils/ws';
export default {
	data() {
		return {
			isWeixin: false, // 是否微信环境
			qrCodeUrl: '', // 二维码图片URL
			code: '',
			formUrl: '',
			pid: ''
		};
	},
	onLoad(options) {
		const urlParams = new URLSearchParams(window.location.search);
		const code = urlParams.get('code');
		this.code = code;
		this.formUrl = options.from;
		this.pid = options.pid;
		if (this.code) {
			this.bindPhoneLogin(this.code);
		}
	},
	methods: {
		generateState() {
			const timestamp = Date.now().toString(36);
			const randomStr = Math.random().toString(36).substr(2, 10);
			return `${timestamp}-${randomStr}`;
		},
		// 一键登录获取code
		async wechatLogin() {
			// if (!this.code) {
			const appId = 'wx1646001f78d600c2';
			let redirectUri = encodeURIComponent(window.location.href);
			initWebSocket(uni.getStorageSync('userInfo').id);
			const state = 'STATE'; // 用于防止CSRF攻击
			const scope = 'snsapi_userinfo'; // 授权作用域
			const authUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${redirectUri}&response_type=code&scope=${scope}&state=${state}#wechat_redirect`;
			// H5端使用window.location跳转
			window.location.href = authUrl;
			// }
		},
		async bindPhoneLogin(code) {
			let params = {
				code: code
				// "pid": uni.getStorageSync('pid') || ''
			};
			if (uni.getStorageSync('pid')) {
				params.pid = uni.getStorageSync('pid');
			} else {
				params.pid = '';
			}
			try {
				const res = await this.$http.post('/h5/auth/wechatLogin', params);
				initWebSocket(res.data.user.id);
				uni.setStorageSync('token', res.data.token);
				uni.setStorageSync('userInfo', res.data.user);
				if (uni.getStorageSync('pid')) {
					uni.removeStorageSync('pid');
				}
				this.code = '';
				if (!res.data.user.phone) {
					uni.navigateTo({ url: `/pages/login/index` });
				} else {
					if (this.formUrl) {
						window.location.href = window.location.href.split('#')[0] + this.formUrl;
					} else {
						window.location.href = '/';
					}
				}
			} catch (error) {
				setTimeout(() => {
					window.location.href = window.location.origin + '#' + '/pages/login/bindPhone';
				}, 1500);
				// setTimeout(() => {
				// 	uni.redirectTo({
				// 		url: '/pages/login/bindPhone'
				// 	});
				// }, 1500);
			}
		}
	}
};
</script>
<style lang="scss" scoped>
.login-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 80rpx 40rpx;
	box-sizing: border-box;
}

.welcome-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 120rpx;
	margin-bottom: 160rpx;
}

.logo {
	width: 200rpx;
	height: 200rpx;
	margin-bottom: 40rpx;
}

.welcome-text {
	font-size: 48rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
}

.slogan {
	font-size: 32rpx;
	color: #666;
}

.login-btn-container {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.wechat-login-btn {
	width: 80%;
	height: 88rpx;
	background: linear-gradient(90deg, #ff3f39 0%, #ff7937 100%);
	color: white;
	border-radius: 50rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 32rpx;
	border: none;
}

.wechat-icon {
	width: 48rpx;
	height: 48rpx;
	margin-right: 20rpx;
}

.browser-tips {
	text-align: center;
	color: #666;
	font-size: 28rpx;
	margin-top: 40rcap;
}

.qr-code {
	width: 300rpx;
	height: 300rpx;
	margin-top: 40rpx;
	border: 2rpx solid #eee;
	padding: 20rpx;
	background: white;
}
</style>
